<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="/js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>-->
<!--    <link rel="stylesheet" type="text/css" href="/js/bootstrap-3.3.7-dist/css/bootstrap.css" />-->
    <link rel="stylesheet" type="text/css" href="/css/appointment.css"/>
<!--    <script src="/js/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>-->
    <link rel="stylesheet" type="text/css" th:href="@{~/css/bootstrap.css}" />
    <script th:src="@{~/js/jquery-3.3.1.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{~/js/bootstrap.js}" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container-fluid">
    <div  class="bgcHeader col-lg-12">
        <div class="col-lg-12 headerWidth">
            <h1 class="text-center text-black part1-textSet ">预约挂号</h1>
        </div>
    </div>
    <div class="row mainBGC">
        <!-- 左侧查询部分 -->
        <div class="col-lg-1">
        </div>

        <div class="col-lg-4 part1-bgc">
            <form action="/getDoctor">
                <div>
                    <h1>快速预约挂号</h1>
                </div>
                <div>
                    <h1>&nbsp;</h1>
                </div>
                <div class="">
                    <p>名医小秘协助您查询全国39个省份共3601家医院在各个预约挂号服务平台的号源信息，助您轻松预约挂号</p>
                </div>
                <div>
                    <h3>&nbsp;</h3>
                </div>
                <div class="form-group">
<!--                    <form action="/doctorEveryOne">-->
                        <label  class=" control-label">您如果知道医生的名字，也可以通过该功能查询医生的相关信息。</label>
                        <div class="col-lg-10">
                            <input type="text" class="form-control nameSet" name="docName" />
                        </div>
                        <div class="col-lg-2  ">
                            <button class="btn btn-default btnColor" type="submit">查询</button>
                        </div>
<!--                    </form>-->

                </div>
            </form>
        </div>
        <!-- 右侧预约部分 -->
        <div class="col-lg-6 part1-bgc">
            <form class="form-horizontal" role="form" action="/addAppointment">
                <div class="form-group">
                    <label class="col-sm-2 control-label">科室名称</label>
                    <div class="col-sm-10">
                    <select class="form-control" name="subjectName">
                        <option>请选择</option>
                        <div  th:each="subject,status:${session.subjects}">
                            <option th:text="${subject.subjectName}">111</option>
                        </div>
                    </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">疾病名称</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="lastname" placeholder="选添" name="illness">
                    </div>
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">预约姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="lastname" name="appointmentName">
                    </div>
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">预约电话</label>
                    <div class="col-sm-10">
                        <input type="tel" class="form-control" id="lastname" name="appointmentTel">
                    </div>
                </div>
                <div class="form-group">
                    <label for="lastname" class="col-sm-2 control-label">预约时间</label>
                    <div class="col-sm-10">
                        <input type="datetime-local" class="form-control" id="lastname" name="appointmentDate">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn form-control btn-default">确认预约</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-lg-12">
            <div class="col-lg-2">

            </div>
            <div class="col-lg-2 ">
                <h1><a href="#" class="fontcolor">名医推荐</a></h1>
            </div>
        </div>
        <div class="col-lg-2">
        </div>
        <div class="col-lg-2">
            <a href="#"><img th:src="@{/images/doc1.jpg}" ></a>
            <h3 ><a href="#" class="fontcolor">杜斌</a></h3>
            <p><a href="#" class="fontcolor">主任医师 / 教授</a></p>
            <p class="overHidden"><a href="" class="fontcolor">擅长耳显微外科，耳内镜手术，耳科微创手术，如各类中耳炎、胆脂瘤，分泌性中耳炎，腺样体肥大，鼓膜穿孔，耳硬化症，中耳畸形，中耳听力重建、周围性面瘫、搏动性耳鸣</a></p>
        </div>
        <div class="col-lg-2">
            <a href="#"><img th:src="@{/images/doc2.jpg}" ></a>
            <h3><a href="#" class="fontcolor">张奉春</a></h3>
            <p><a href="#" class="fontcolor">主任医师 / 博士研究生导师</a></p>
            <p class="overHidden"><a href="" class="fontcolor">擅长耳显微外科，耳内镜手术，耳科微创手术，如各类中耳炎、胆脂瘤，分泌性中耳炎，腺样体肥大，鼓膜穿孔，耳硬化症，中耳畸形，中耳听力重建、周围性面瘫、搏动性耳鸣</a></p>
        </div>
        <div class="col-lg-2">
            <a href="#"><img th:src="@{/images/doc3.jpg}" ></a>
            <h3><a href="#" class="fontcolor">李雪梅</a></h3>
            <p><a href="#" class="fontcolor">内科学系主任 / 主任医师 / 教授</a></p>
            <p class="overHidden"><a href="" class="fontcolor">擅长耳显微外科，耳内镜手术，耳科微创手术，如各类中耳炎、胆脂瘤，分泌性中耳炎，腺样体肥大，鼓膜穿孔，耳硬化症，中耳畸形，中耳听力重建、周围性面瘫、搏动性耳鸣</a></p>
        </div>
        <div class="col-lg-2">
            <a href="#"><img th:src="@{/images/doc4.jpg}" ></a>
            <h3><a href="#" class="fontcolor">夏维波</a></h3>
            <p><a href="#" class="fontcolor">主任医师 / 教授</a></p>
            <p class="overHidden"><a href="" class="fontcolor">擅长耳显微外科，耳内镜手术，耳科微创手术，如各类中耳炎、胆脂瘤，分泌性中耳炎，腺样体肥大，鼓膜穿孔，耳硬化症，中耳畸形，中耳听力重建、周围性面瘫、搏动性耳鸣</a></p>
        </div>

    </div>
</div>
</body>
<script type="text/javascript">
    $(".exchangeHidden1").click(function(){
        $("#exchange1").removeClass("hidden1")
    })

    $(".exchangeHidden1").mouseleave(function(){
        $("#exchange1").addClass("hidden1")
    })

    $(".exchangeHidden2").click(function(){
        $("#exchange2").removeClass("hidden2")
    })

    $(".exchangeHidden2").mouseleave(function(){
        $("#exchange2").addClass("hidden2")
    })
</script>
</html>